package com.cie2.map.pages;

import java.util.List;

import org.apache.tapestry5.Asset;
import org.apache.tapestry5.RenderSupport;
import org.apache.tapestry5.annotations.Component;
import org.apache.tapestry5.annotations.Environmental;
import org.apache.tapestry5.annotations.IncludeStylesheet;
import org.apache.tapestry5.annotations.Path;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.annotations.SetupRender;
import org.apache.tapestry5.hibernate.annotations.CommitAfter;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.json.JSONArray;
import org.chenillekit.tapestry.core.components.ColorPicker;

import com.cie2.map.entities.Area;
import com.cie2.map.entities.Area.AreaType;
import com.cie2.map.services.AreaEngine;
import com.cie2.map.services.JSONProcessor;

// karena belum pake layout kita include sendiri 
@IncludeStylesheet("context:style.css")
public class AreaEditor {

	// adding javascript library to the top of the generated html file
	@Inject @Path("context:js/map_editor.js")
	private Asset mapEditorLib;

	@Inject @Path("context:js/editor_panel.js")
	private Asset editorPanelLib;
	  
	@Environmental
	private RenderSupport renderSupport;

	@SetupRender
	void addLibrary() {
		renderSupport.addScriptLink(mapEditorLib);
		renderSupport.addScriptLink(editorPanelLib);
		
//		String createIcon = "function createIcon() { "
//				+ "var myIcon = new GIcon(); "
//				+ "myIcon.image = '" + iconImage + "'; "
//				+ "myIcon.shadow = 'images/markers/shadow.png'; "
//				+ "myIcon.iconSize = new GSize(8,8); "
//				+ "myIcon.shadowSize = new GSize(12,8); "
//				+ "myIcon.iconAnchor = new GPoint(4,8); "
//				+ "myIcon.infoWindowAnchor = new GPoint(4,0); "
//				+ "myIcon.printImage = 'images/markers/printImage.gif'; "
//				+ "myIcon.mozPrintImage = 'images/markers/mozPrintImage.gif'; "
//				+ "myIcon.printShadow = 'images/markers/printShadow.gif'; "
//				+ "myIcon.transparent = 'images/markers/transparent.png'; "
//				+ "myIcon.imageMap = [6,0,7,1,7,2,7,3,7,4,7,5,7,6,6,7,1,7,0,6,0,5,0,4,0,3,0,2,0,1,1,0]; "
//				+ "return myIcon; " + "}";
//		renderSupport.addScript(createIcon);
	}	
	// end 
	
	@Property
	private String name;

	@Property
	private AreaType type;
	
	// harusnya bisa pake object area, tapi lupa caranya gimana
	@Property
	private Integer minLayer;

	@Property
	private Integer maxLayer;
	
    @Property
    private String layerColor;

    @Component(parameters = {"value=layerColor"})
    private ColorPicker areaColor;

    @Property
    private String lineColor;

    @Component(parameters = {"value=lineColor"})
    private ColorPicker lineColorPicker;

	@Property
	private String hiddenValue;
	
	@Inject
	private AreaEngine areaEngine;
	
	@CommitAfter
	Object onSuccess() {
		System.out.println("=== calling on success " );
		System.out.println("Hidden value is: " + hiddenValue);

		Area area = new Area();
		area.setName(name);
		area.setType(type);
		area.setMinLayer(minLayer);
		area.setMaxLayer(maxLayer);
		area.setDefaultAreaColor(layerColor);
		area.setDefaultLineColor(lineColor);
		
		System.out.println("area : " + area.getName() + area.getType() + area.getMinLayer() + area.getDefaultAreaColor());
		areaEngine.storeArea(area, hiddenValue);
		return null;
	}
	

	@Inject
	private JSONProcessor jsonProcessor;
	
	public JSONArray getArea() {
		List areaMarkers = areaEngine.getAllAreaMarkers();
		return jsonProcessor.marshal(areaMarkers);
		
	}
}
